<template>
  <div class="editor-container">
    <editor
        v-model="data"
        @init="editorInit"
        lang="xml"
        theme="monokai"
        width="100%"
        height="100%"
    />
  </div>
</template>

<script>
// created by qwesde@hust.edu.cn
import vue2_ace_editor, {editor} from "vue2-ace-editor";
import 'brace/ext/language_tools'
import 'brace/mode/xml'
// import 'brace/theme/eclipse'
import 'brace/theme/monokai'
// import 'brace/theme/xcode'
import 'brace/snippets/xml'

export default {
  name: "index",
  components: {
    editor: vue2_ace_editor
  },
  props: {
    content: String,
    onChange: Function,
  },
  data() {
    return {
    }
  },
  computed: {
    data: {
      get() {
        return this.$props.content;
      },
      set(val) {
        this.onChange(val)
        // this.$emit('on-change', val)
      }
    }
  },
  methods: {
    editorInit(editor) {
      // 配置编辑器
      editor.setOptions({
         maxLines: (window.innerHeight-250)/14.4,
         minLines: 20
      });
    }
  },
    mounted () {
        const that = this
        window.onresize = () => {
            return (() => {
                window.screenWidth = document.body.clientWidth
                that.screenWidth = window.screenWidth
            })()
        }
    },
}
</script>

<style>
.editor-container {
  width: auto;
}
</style>
